import React, { useState } from 'react';
import { Input, Button } from 'antd';
import FileUpload from '@/components/Custom/FileUpload';
import IconFont from '@/components/IconFont';
import styles from './index.less';

// 入职指引第二步材料表单项
const MaterialItem = React.forwardRef((props, ref) => {
    const {
        onChange,
        value,
        inputType,
        uploadTip,
        uploadFormatTip,
        uploadCountLimit,
        uploadFormatLimit,
        materialCode,
        handlePreview
    } = props;
    const uploadPros = {
        fileSize: 10
    };

    const [uploadDisabled, setUploadDisabled] = useState(false); // 上传组件数量控制

    if (inputType === 0) {
        return <Input placeholder="请输入" ref={ref} size="large" onChange={onChange} value={value} maxLength={200} />;
    }
    if (inputType === 1) {
        return (
            <>
                <FileUpload
                    showPreviewFile
                    ref={ref}
                    onChange={e => {
                        const { allFileList } = e;
                        if (allFileList?.length >= uploadCountLimit) {
                            setUploadDisabled(true);
                        } else {
                            setUploadDisabled(false);
                        }
                        if (onChange) {
                            onChange(e);
                        }
                    }}
                    onPreview={e => {
                        if (handlePreview) {
                            handlePreview(e);
                        }
                    }}
                    value={value}
                    categoryCode={materialCode}
                    className={styles.uploadItemWrap}
                    checkFileSize={uploadPros.fileSize}
                    checkFileSizeMsg={`文件大小不能超过${uploadPros.fileSize}MB！`}
                    checkFileType={uploadFormatLimit && uploadFormatLimit?.replace(/\//g, ',')}
                    checkFileTypeMsg={`只支持${uploadFormatLimit}文件`}
                >
                    <Button disabled={uploadDisabled} type="link" className={styles.uploadButtonWrap}>
                        <div className={styles.uploadButton}>
                            <IconFont icon="upload" style={{ marginRight: 6 }} />
                            上传文件
                        </div>
                        <ul className={styles.tipWrap}>
                            <li>{uploadTip}</li>
                            <li>{uploadFormatTip}</li>
                        </ul>
                    </Button>
                </FileUpload>
            </>
        );
    }
    return null;
});

export default MaterialItem;
